import { RootState } from '@/modules/RootState';
import { transTime, transTimes } from '@/utils/time';
import { useAudioContext } from '@/views/Audio/Audio';
import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux';

function Progress() {
  const musicList = useSelector((state:RootState) => state.musicList);
  const audioDispatch = useAudioContext()
  const [progress,setProgress] = useState(0)

  const time = useCallback(()=>{
    if(audioDispatch.audioDuration){
      return transTime(audioDispatch.audioDuration)
    }else{
      return '00:00'
    }
  },[audioDispatch.audioIndex])

  const updateProgress = useCallback(()=>{
    
  },[audioDispatch.audioCurrent]) 

  useEffect(()=>{
    if(audioDispatch.audioCurrent + 0.2 >=  (audioDispatch.audioDuration / 1000)){
      if(audioDispatch.audioIndex > musicList.oldSongs.length){
        audioDispatch.StartOrStop()
      }else{
        audioDispatch.nextSong(1)
      }
    }else{
      let b = audioDispatch.audioCurrent / (audioDispatch.audioDuration / 1000) * 97
      setProgress(b)
    }
  },[audioDispatch.audioCurrent])

  return (
    <div className='progress'>
        <div className='time'>
          {
            transTimes(audioDispatch.audioCurrent)
          }
        </div>
        <div className='progress2'>
            <div className="progress3" style={{width:`${progress}%`}}>
              <div className="circle"></div>
            </div>
        </div>
        <div className='time'>
          {
            time()
          }
        </div>
    </div>
  )
}

export default React.memo(Progress)